/**
{
"style":{
"navigationBarTitleText":"车辆管理",
"navigationStyle": "default"
}
}
*/
<template>
	<view :class="[isiPhone? 'pb-180':'pb-140', 'char']">
		<xi-list ref="$list" class="bg#f5f5f5" :auto="false" :query="on.query" :pageSize="15">

			<template #default="{ data }">
				<view class="list">
					<view class="card-base-box relative" v-for="item in data" :key="item.id" @click="editAddress(item)">

						<view class="status-cl" v-if="item.w_state == '未处理'">
							未处理
						</view>
						<image class="relative z-index1" src="__ROOT__/common/images/card-bg.png" mode=""></image>
						<view class="card-cont absolute z-index2 top0 left0">
							<view class="wz">
								违章{{item.num}}
							</view>

							<view class="card-top flex-tbc">
								<view>
									<view class="chepai flex-tbc">
										{{item.code}} <text
											:class="[item.type.type == 2? 'text1':'text2']">{{item.type.type == 2? '蓝':'绿'}}</text>
									</view>
									<view class="che-leix text-ellipsis-2">
										{{item.pin}}·{{item.type.name || ''}}
									</view>
								</view>

								<view class="jiashi-image">
									<image class="ww100 hh100" :src="getImage(item.images)" mode="aspectFill">
									</image>
								</view>
							</view>

							<view class="info flex-tbc mt12">
								<view class="info1">
									年检时间 <text class="ml10">{{getDate(item.y_day)}}</text>
								</view>

								<view class="info1 ml34">
									保险到期 <text class="ml10">{{getDate(item.b_day)}}</text>
								</view>
							</view>

							<view class="card-bottom flex-lr-tbc mt20">
								<view class="info1">
									所有人 <text class="ml14">{{item.car_name}}</text>
								</view>

								<view class="more flex-tbc" @click.stop="editA(item)" v-if="!pageId">
									编辑 <image class="w11 h19 ml10" src="__ROOT__/common/images/row-r.png" mode="">
									</image>
								</view>
							</view>

						</view>
					</view>
				</view>
			</template>
		</xi-list>

		<view :class="[isiPhone? 'pb-68':'pb-32', 'fixed_b']" v-if="!pageId">
			<view class="footer-f">
				<view class="btn-w flex-all-c" @click="addAddress">
					<view class="t relative">
						<view class="add">
							+
						</view> 添加车辆
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue'

	import timeFormat from '@/utils/timeFormat.js'

	const isiPhone = ref('')
	const statusBar = ref('')
	const customBar = ref('')
	const getPageInfo = () => {}
	const initPage = () => {
		isiPhone.value = uni.getStorageSync('isiPhone')
		statusBar.value = uni.getStorageSync('statusBar')
		customBar.value = uni.getStorageSync('customBar')
	}
	const $list = ref(null)

	const pageType = ref('')
	const pageId = ref('')


	let on = {
		async query(req) {
			let res = {}
			if(pageId.value) {
				res = await $post('/stores/customer_car', {
					...req,
					id: pageId.value
				})
			} else {
				res = await $post('/user/get_my_car', {
					...req,
				})
			}
			let obj = {
				data: res.list,
			}
			return obj
		}
	}

	const addAddress = () => {
		uni.navigateTo({
			url: '/pages/charPages/charPages/add'
		})
	}

	const editAddress = (item) => {
		if (pageType.value == 'order') {
			uni.setStorageSync('charId', item.id)
			uni.navigateBack()
			return
		}
		uni.navigateTo({
			url: '/pages/charPages/charPages/add?id=' + item.id
		})
	}

	const editA = (item) => {
		uni.navigateTo({
			url: '/pages/charPages/charPages/add?id=' + item.id
		})
	}

	const getImage = (url) => {
		if (url) {
			return url.split(',')[0]
		} else {
			return ''
		}
	}

	const getDate = (time) => {
		if (time) {
			time = time.replace(/-/g, '/')
			let time1 = new Date(time)
			return timeFormat(time1, 'yyyy年mm月dd日')
		} else {
			return ''
		}
	}
	
	const initData = () => {
		$list.value.reload()
	}


	Vue.onShow(() => {
		initPage()
		nextTick(() => {
			initData()
		})
	})
	Vue.onLoad((options) => {
		pageType.value = options.type
		pageId.value = options.id
	})
</script>
<style scoped lang='scss'>
	.char {
		height: 100%;
	}

	.list {
		padding: 1rpx;
	}

	.info1 {
		font-family: OPPOSans, OPPOSans;
		font-weight: 400;
		font-size: 24rpx;
		color: #7D7D7D;
		line-height: 40rpx;

		text {
			color: #292929;
		}
	}

	.t {
		padding-left: 46rpx;
	}

	.add {
		width: 38rpx;
		height: 38rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 3rpx solid #FFFFFF;
		font-size: 28rpx;
		font-weight: 900;
		border-radius: 50%;
		line-height: 32rpx;
		text-align: center;
		margin-right: 8rpx;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translatey(-50%);
	}

	.card-base-box {
		position: relative;

		.status-cl {
			width: 66rpx;
			height: 30rpx;
			background: #E50004;
			border-radius: 14rpx 14rpx 0rpx 14rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 18rpx;
			color: #FFFFFF;
			line-height: 30rpx;
			text-align: center;
			position: absolute;
			top: 5px;
			right: 78px;
			z-index: 10;
		}
	}
	
	.che-leix {
		height: 80rpx;
		max-width: 400rpx;
	}
</style>